<template>
  <el-card class="card-body-np" style="box-shadow: none!important;">
    <div class="flex-row" style="padding-top: 10px;">
      <div class="" style="width: 110px;height: 110px;" v-if="data.basicThumbnails">
        <!-- <img v-lazy="data.imgsrc" alt="" style="width: 100%;"> -->
        <!-- <img :src="data.basicThumbnails" alt="" class="img-fluid" style="width: 110px;"> -->
        <div class="zoomImage" v-lazy:background-image="data.basicThumbnails"></div>
      </div>
      <div class="flex-all" style="width: 770px;">
        <el-row>
          <el-col :span="24" >
            <div class="topic-item">
              <p class="topic-title" @click="goTopic">{{data.basicTitle}}</p>
              <div class="list-footer-fs">
                <div class="topic-desc" @click="openContent" v-show="!readAll">{{data.basicDescription}}&nbsp;.&nbsp;.&nbsp;.&nbsp;&nbsp;&nbsp;
                  <el-button type="text" class="el-icon-arrow-down topic-btn" @click="openContent">阅读全文</el-button>
                </div>
                <div class="topic-content" v-show="readAll">
                  <div  v-html="content"></div>
                  <div style="text-align: right;">
                    <el-button type="text" class="el-icon-arrow-up topic-btn" @click="closeContent">收起</el-button>
                  </div>
                </div>
                <div class="" style="margin: 12px 0;">
                  <img  :src="data.profilePicture ? data.profilePicture : 'static/morentouxiang.png'" style="height: 20px;border-radius: 50%;">
                  <span>{{data.nickName ? data.nickName : data.username}}</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span style="font-size: 14px;">{{$formatDateTime(data.ctime)}}</span>
                  <div class="fr topic-card-liked" style="margin-right: 18px;font-size: 14px;">
                    <img src="../../assets/dianzan.png" class="img-responsive" style="width: 14px;position: relative;top: -3px;" alt="">
                    <span>{{data.likeNumber}}</span>
                  </div>
                  <div class="fr" style="margin-right: 18px;font-size: 14px;">
                    <span class="el-icon-view" style="padding-top: 3px;"></span>
                    <span class="">{{data.browseNumber}}</span>
                  </div>
                  <div class="fr topic-card-comments" :class="{'comments-open': readComments}" @click="openComment" v-if="data.isComment === 'YES'" style="margin-right: 18px;font-size: 14px;">
                    <span class="el-icon-edit-outline" style="padding-top: 3px;"></span>
                    <span v-show="!readComments">{{data.comments}}条评论</span>
                    <span v-show="readComments">收起评论</span>
                  </div>
                  <div class="" v-show="readComments">
                    <topic-comments :coms.sync="comments" :info="data" text-rows="1" @comment-success="data.comments += 1"></topic-comments>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
import axios from 'axios'
import TopicComments from './TopicComments'

export default {
  name: "topic-card",
  title: "单个话题展示卡片",
  props: {
    topic: {
      type: Object
    }
  },

  data () {
    return {
      content: '',
      comments: [],
      data: {}, // 本条话题内容
      readAll: false, // 是否展开内容
      readComments: false, // 是否展开评论
    }
  },
  mounted () {
    this.data = Object.assign({}, this.topic)
  },
  methods: {
    openContent () {
      if (this.content && this.content.length > 0) {
        this.readAll = true
        return
      }
      let obj = {topicId: this.data.modelId}
      if (this.isLogin) {
        obj.userId = this.$store.state.user.user.user.userId
      }
      axios.post('/mscs/topic/findTopicContentById', this.$paramsConvert(obj)).then(res => {
        if (res.data.code === 1) {
          this.setData(res.data.data.data)
          this.readAll = true
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    openComment () {
      if (this.comments && this.comments.length > 0) {
        this.readComments = !this.readComments
        return
      }
      let obj = {topicId: this.data.modelId}
      if (this.$store.state.user.isLogin) {
        obj.userId = this.$store.state.user.user.user.userId
      }

      axios.post('/mscs/topic/findCommentByType', this.$paramsConvert(obj)).then(res => {
        if (res.data.code === 1) {
          this.comments = res.data.data
          this.readComments = !this.readComments
        } else {
          this.$codeError(res)
        }
      }).catch(error => {
        this.$catchError(error)
      })
    },
    setData (resObj) {
      this.content = resObj.topicContent
    },
    closeContent () {
      this.readAll = false
    },
    goTopic () {
      const {href} = this.$router.resolve({
        name: 'topicdetails',
        // query: this.data
        query: { 
          modelId: this.data.modelId, 
          // profilePicture: this.data.profilePicture,
          // nickName: this.data.nickName,
          // username: this.data.username,
          browseNumber: this.data.browseNumber,
          comments: this.data.comments
        }
      })
      window.open(href, '_blank')
    },
    // 点赞
    liked () {
      if (!this.isLogin) {
        this.$openLogin()
      } else {
        axios.post('/mscs/topic/userLikeOrCancel', this.$paramsConvert({
          type: (this.data.like === 0 || this.data.like === '0') ? 'LIKE' : 'CANCEL',
          topicId: this.data.modelId || this.data.topicId,
          userId: this.$store.state.user.user.user.userId
        })).then((res) => {
          if (res.data.code === 1) {

            if (this.data.like === 0 || this.data.like === '0') {
              this.data.like = 1
              this.data.likeNumber = parseInt(this.data.likeNumber) + 1
            } else {
              this.data.like = 0
              this.data.likeNumber = parseInt(this.data.likeNumber) - 1
            }
          }
        }).catch((error) => {
          // debugger
          this.$catchError(error)
        })
      }
    },
  },
  // watch: {
  //   'comments': {
  //     handler (val) {
  //       let len = val.length
  //       for (var i = 0; i < val.length; i++) {
  //         len += val[i].mscsReplyVos ? val[i].mscsReplyVos.length : 0
  //       }
  //       this.data.comments = len
  //     },
  //     deep: true
  //   }
  // },
  computed: {
    isLogin () {
      return this.$store.state.user.isLogin
    }
  },
  components: {
    TopicComments
  }
}
</script>
<style>
  .topic-item {
    padding-bottom: 16px;
    padding-left: 10px;
  }
  .topic-item .topic-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 3px;
    cursor: pointer;
  }
  .topic-item .topic-title:hover {
    color: #94C05A;
  }
  .topic-item .topic-desc {
    cursor: pointer;
    font-size: 15px;
    color: #333333;
    font-weight: normal;
    margin: 0;
    overflow: hidden;
    line-height: 1.6;
    word-break: break-all;
    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-line-clamp: 4; /** 显示的行数 **/
  }
  .topic-item .topic-content {
    font-size: 16px;
    color: #333333;
  }
  .topic-item .topic-content img {
    max-width: 100%;
    height: auto;
  }
  .topic-item .topic-desc:hover {
    color: #666666;
  }
  .topic-item .topic-btn {
    padding: 0px;
    color: #94C05A;
  }
  .topic-item .topic-btn:hover {
    background-color: transparent;
    border: none;
    color: #666666;
  }
  .topic-item .topic-btn::before {
    float: right;
    margin-left: 10px;
  }
  .tl-container {
      padding-left: 100px;   /* LC width */
      cursor: pointer;
  }
  .tl-title {
    margin-bottom: 8px;
  }
  .tl-container .tl-column {
      /* height: 50px; */
      position: relative;
      float: left;
      padding: 37px 0 21px 0;
  }
  .tl-content {
      width: 100%;
      height: 100px;
  }
  .tl-icon {
      width: 100px;
      height: 100px;        /* LC width */
      right: 100px;          /* LC width */
      margin-left: -100%;
  }
  .tl-content-desc {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  .topic-card-comments {
    cursor: pointer;
  }
  .comments-open {
    color: #94C05A;
  }
</style>
